<template>
  <div class="_condition">
    <el-drawer
      title="条件判断"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :model-value="isDialog"
      :before-close="clearDialog"
    >
      <div class="_content">
        <el-form
          class="name-form"
          :model="nameForm"
          ref="nameForm"
          label-position="top"
          :disabled="readOnly"
          @submit.left.prevent
        >
          <el-form-item
            label="组件名称"
            prop="name"
            :rules="[
              {
                required: true,
                message: '请输入组件名称',
                trigger: ['blur', 'change'],
              },
            ]"
          >
            <el-input
              v-model.trim="nameForm.name"
              type="text"
              maxlength="15"
              :show-word-limit="true"
            >
            </el-input>
          </el-form-item>
        </el-form>

        <!-- ----------------------- -->

        <Limits
          v-model="limitsList"
          :options="setLimitCompontentList()"
          :disabled="readOnly"
        ></Limits>
        <div v-if="shape == 'condition'">
          <el-form
            class="name-form"
            :model="formData"
            ref="formData"
            label-position="top"
            :disabled="readOnly"
          >
            <el-form-item
              label="不满足用户条件"
              prop="judgeNoType"
              :rules="[
                {
                  required: true,
                  message: '请输入组件名称',
                  trigger: ['blur', 'change'],
                },
              ]"
            >
              <el-radio-group v-model="formData.judgeNoType">
                <el-radio :label="1">立即执行</el-radio>
                <el-radio :label="2">开启等待</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-show="formData.judgeNoType == 2">
              <div class="_wait">
                <span>最长等待</span>
                <el-form-item class="mr-4 ml-4">
                  <el-input
                    v-model="formData.delayJudgeNoTimeValue"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <el-form-item class="mr-4">
                  <el-select v-model="formData.delayJudgeNoTimeType" placeholder="请选择">
                    <el-option
                      v-for="item in dateList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <span>停止判断</span>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="clearDialog">取 消</el-button>
          <el-button type="primary" @click="validateForm">确 定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script>
import { conditionalOriginal, setLimitCompontentList } from "@/utils/index";
import { NodeDrawerDataModel } from "@/views/workTable/dataModel/NodeDrawerDataModel";
import Limits from "@/components/limits/Index.vue";
export default {
  props: {
    canvasData: {
      require: false,
      type: Object,
    },
    data: {
      require: false,
      type: Object,
      default: () => {
        return {};
      },
    },
    addNodeEventData: {
      type: Object,
      default() {
        return {};
      },
    },
    readOnly: Boolean,
  },
  components: { Limits },
  data() {
    return {
      limitsList: {},
      radio: 1,
      isDialog: true,
      shape: false,
      nameForm: {
        name: "条件判断",
      },
      formData: {
        judgeNoType: 1,
        delayJudgeNoTimeType: 3,
        delayJudgeNoTimeValue: 0, //延迟时间的值，默认0
      },
      dateList: [
        { id: 7, name: "周" },
        { id: 3, name: "日" },
        // { id: 2, name: "月" },
        { id: 4, name: "小时" },
        { id: 5, name: "分钟" },
        // { id: 2, name: "秒" },
      ],
    };
  },

  async created() {
    const { cell } = this.addNodeEventData;
    this.shape = cell.shape; // condition | event

    if (JSON.stringify(this.data) != "{}") {
      this.nameForm.name = this.data.name;
      this.limitsList =
        JSON.parse(this.data.conditionalOriginal) ?? conditionalOriginal();
      if (this.shape == "condition") {
        this.formData = {
          judgeNoType: this.data.judgeNoType,
          delayJudgeNoTimeType: this.data.delayJudgeNoTimeType,
          delayJudgeNoTimeValue: this.data.delayJudgeNoTimeValue, //延迟时间的值，默认0
        };
      }
    }
  },
  methods: {
    setLimitCompontentList,
    validateNameForm() {
      this.$refs.nameForm.validate((valid) => {
        if (valid) {
          this.validateForm();
        } else {
          return false;
        }
      });
    },
    validateForm() {
      this.submit();
    },
    submit() {
      let params = this.limitsList;
      let lastParams = {};
      if (this.shape === "condition") {
        lastParams = {
          conditionalOriginal: JSON.stringify(this.limitsList),
          name: this.nameForm.name,
          ...this.formData,
        };
      } else {
        lastParams = {
          conditionalOriginal: JSON.stringify(params),
          name: this.nameForm.name,
        };
      }
      //
      this.$emit(
        "confirm",
        new NodeDrawerDataModel({
          dialogData: lastParams,
        })
      );
      this.clearDialog();
    },
    clearDialog() {
      this.$emit("cancel");
    },
  },
};
</script>
<style lang="scss" scoped>
._condition {
  display: block;
  font-family: PingFangSC-Regular, PingFang SC;

  :deep(.el-drawer) {
    line-height: 1;
    min-width: 1000px;
  }
  ._content {
    min-height: 300px;
    padding: 0 20px;
    margin-right: 20px;
  }

  :deep(.el-date-editor) {
    width: 170px;
  }
}

._wait {
  display: flex;
  .el-input,
  .el-select {
    width: 80px;
  }
}

.mr-4 {
  margin-right: 4px;
}
.ml-4 {
  margin-left: 4px;
}
:deep(.icon-arrow-down:before) {
  display: none;
}
</style>
